import React from 'react';
import { Card, Row, Col, Typography, Badge } from 'antd';
import { TrophyOutlined, LockOutlined } from '@ant-design/icons';
import { useUserStore } from '../../store/userStore';
import { Achievement } from '../../types';

const { Title, Text } = Typography;

// 成就数据
const achievements: Achievement[] = [
  {
    id: 'first_task',
    title: '初次环保',
    description: '完成第一个环保任务',
    icon: '🌱',
    unlockedAt: undefined
  },
  {
    id: 'carbon_reduction',
    title: '碳足迹减少者',
    description: '将碳足迹减少10%',
    icon: '🌍',
    unlockedAt: undefined
  },
  {
    id: 'tree_planter',
    title: '植树达人',
    description: '在星球上种植10棵树',
    icon: '🌳',
    unlockedAt: undefined
  },
  {
    id: 'water_guardian',
    title: '水质守护者',
    description: '将水质提升到90%以上',
    icon: '💧',
    unlockedAt: undefined
  },
  {
    id: 'energy_saver',
    title: '能源节约者',
    description: '绿色能源使用率达到80%',
    icon: '⚡',
    unlockedAt: undefined
  },
  {
    id: 'biodiversity',
    title: '生物多样性保护者',
    description: '生物多样性达到85%',
    icon: '🦋',
    unlockedAt: undefined
  }
];

export const Achievements: React.FC = () => {
  const { user } = useUserStore();
  const userAchievements = user?.achievements || [];

  return (
    <div style={{ padding: '20px' }}>
      <Title level={2} style={{ marginBottom: '30px' }}>
        <TrophyOutlined style={{ marginRight: '10px', color: '#FFD700' }} />
        我的成就
      </Title>

      <Row gutter={[20, 20]}>
        {achievements.map((achievement) => {
          const isUnlocked = userAchievements.some(a => a.id === achievement.id);
          
          return (
            <Col xs={24} sm={12} md={8} lg={6} key={achievement.id}>
              <Card
                hoverable
                style={{
                  height: '100%',
                  background: isUnlocked ? '#f0f9ff' : '#f5f5f5',
                  border: isUnlocked ? '2px solid #1890ff' : '1px solid #d9d9d9'
                }}
              >
                <div style={{ textAlign: 'center', marginBottom: '15px' }}>
                  <span style={{ fontSize: '40px' }}>{achievement.icon}</span>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <Title level={4} style={{ margin: '0 0 10px 0' }}>
                    {isUnlocked ? (
                      <Badge status="success" text={achievement.title} />
                    ) : (
                      <>
                        <LockOutlined style={{ marginRight: '5px' }} />
                        {achievement.title}
                      </>
                    )}
                  </Title>
                  <Text type="secondary">{achievement.description}</Text>
                  {isUnlocked && (
                    <div style={{ marginTop: '10px', color: '#52c41a' }}>
                      +50 绿色能量
                    </div>
                  )}
                </div>
              </Card>
            </Col>
          );
        })}
      </Row>
    </div>
  );
}; 